<template>
  <div>
    <div class="title">异常信息人员</div>
    <xTable
      v-model:refresh="refresh"
      :columns="tableColumns"
      http-data-key="data"
      :http="{
        list: abnormalInfoPersonnel,
      }"
      :pagination="false"
      :scroll="{ y: 400, maxHeight: 400 }"
    >
      <template #create_time="{ row }">
        {{ parseTime(row.create_time) }}
      </template>
      <template #optional="{ row }">
        <text
          style="color: rgb(var(--primary-6)); cursor: pointer"
          :row="row"
          @click="goInfo(row)"
          >查看</text
        >
      </template>
    </xTable>
  </div>
</template>

<script lang="ts">
  import { reactive, ref, defineComponent } from 'vue';
  import { abnormalInfoPersonnel } from '@/api/dashboard';
  import { useRouter } from 'vue-router';
  import { parseTime } from '@/utils/index';

  export default defineComponent({
    setup: () => {
      const router = useRouter();
      const refresh = ref(true);
      const tableColumns = reactive([
        {
          title: '姓名',
          align: 'left',
          dataIndex: 'nick_name',
          width: 92,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '性别',
          align: 'left',
          dataIndex: 'sex',
          width: 64,
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '症状',
          align: 'left',
          dataIndex: 'problem_describe',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '异常时间',
          align: 'left',
          dataIndex: 'create_time',
          slotName: 'create_time',
          width: 180,
          ellipsis: true,
          tooltip: true,
        },
        {
          dataIndex: 'optional',
          title: '操作',
          align: 'left',
          slotName: 'optional',
          width: 80,
        },
      ]);
      const goInfo = (data: { [x: string]: any }) => {
        router.push({
          name: 'DashboardRealTime',
          params: {
            id: data.user_id,
            name: data.nick_name,
          },
        });
      };
      return {
        refresh,
        tableColumns,
        parseTime,
        goInfo,
        abnormalInfoPersonnel,
      };
    },
  });
</script>

<style lang="less" scoped>
  .title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    line-height: 28px;
    margin-bottom: 22px;
  }
</style>
